<template>
    <div class="code">
        <van-divider dashed :style="{ color: 'black', borderColor: '#879ac1', padding: '0 16px' ,fontSize:'37px'}">
            验证码登录
        </van-divider>
        <van-form @submit="onSubmit">
  <van-field
    v-model="phone"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' },
    { pattern: /^1[356789]\d{9}$/,message: '手机号格式有误'}]"
  />
  <van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <van-button size="small" type="primary" :disabled="isCheck" @click.stop="sendCode" >{{time}}</van-button>
  </template>

</van-field>
  <div style="margin: 16px;">
    <van-button round block type="info"  native-type="submit">登录</van-button>
    <br>
    <van-button round block type="info"  @click="register()">去注册</van-button>
    <br>
    <van-button round block type="info"  @click="login()">密码登录</van-button>
  </div>
</van-form>
    </div>
</template>
<script>
import Url from '../tools/Url'
import { Toast } from 'mint-ui';
export default {
    name:"bycode",
    data(){
        return{
            phone:"",
            sms:"",
            time:"发送验证码",
            isCheck:false,
        }
    },
    methods:{
        sendCode(){
            if(/^1[356789]\d{9}$/.test(this.phone)){
               this.isCheck=true;
               var s = 6;
               var timer = setInterval(()=>{
                   this.time=s+"秒";
                   if(s<=0){
                       clearInterval(timer);
                       this.isCheck = false;
                       this.time="重新发送";
                   }
                   s--;
               },1000)
                this.axios.get(Url.SENDCODE_URL+`?phone=`+this.phone).then(res=>{
                    console.log(res);
                    Toast('验证码为'+res.data.data);
                    if(res.data.code==200){
                        this.sms=res.data.data;
                    }else{
                        Toast(res.data.message);
                    }
                })
            }else{
                Toast("手机号格式错误");
            }
        },

          onSubmit(){
    
            var str = `phone=${this.phone}&code=${this.sms}`;
            this.axios.post(Url.CODE_URL,str).then(res=>{
                console.log(res);
                if(res.data.code==200){
                    this.$store.commit("saveInfo",res.data.data);
                    sessionStorage.setItem("token",res.data.data.token);
                    this.$router.push("/");
                    Toast(res.data.message);

                }else{
                    Toast(res.data.message);
                    console.log(res.data.message);
                }
            })
        },
            register(){
                this.$router.push("/regist");
            },
            login(){
                this.$router.push("/rester");
            }

    },
    mounted(){

    },
}
</script>
<style scoped>
.code{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color:  #fbfef9!important ;
}
.van-cell{
    background-color: #fbfef9!important ;
}
</style>